<template>
	<div class="home">
		<div class="top-box">
			<navMenu />
		</div>

		<div class="content-box">
			<div class="left-box">
				<div
					class="item-btn"
					v-for="(item, index) in btnList"
					:key="item.id"
					:class="{ active: activeIndex == item.url }"
					@click="handleClick(item, index)"
				>
					<el-tooltip class="item" effect="dark" :content="item.name" placement="right">
						<img v-if="activeIndex == item.url" class="btn-text" :src="item.icon1" />
						<img v-else class="btn-text" :src="item.icon" />
					</el-tooltip>
				</div>
			</div>
			<div class="right-box">
				<router-view />
			</div>
		</div>
	</div>
</template>

<script>
import navMenu from '@/components/navMenu.vue';
export default {
	components: {
		navMenu,
	},
	data() {
		return {
			btnList: [
				// { id: 1, name: '游客画像1', icon: require('../../assets/img/icon3.png'), icon1: require('../../assets/img/icon2.png'), url: '/ykhx' },
				// { id: 2, name: '监测分析', icon: require('../../assets/img/icon5.png'), icon1: require('../../assets/img/icon4.png'), url: '/jcfx' },
				// { id: 3, name: '人群分析', icon: require('../../assets/img/icon7.png'), icon1: require('../../assets/img/icon6.png'), url: '/rqfx' },
				// { id: 4, name: '投诉分析', icon: require('../../assets/img/icon9.png'), icon1: require('../../assets/img/icon8.png'), url: '/tsfx' },
				// { id: 5, name: '活动分析', icon: require('../../assets/img/icon11.png'), icon1: require('../../assets/img/icon10.png'), url: '/hdfx' },
				{ id: 1, name: '景区综合分析', icon: require('../../assets/img/icon3.png'), icon1: require('../../assets/img/icon2.png'), url: '/ykhx' },
				
				{ id: 2, name: '游客综合分析', icon: require('../../assets/img/icon7.png'), icon1: require('../../assets/img/icon6.png'), url: '/rqfx' },
				{ id: 4, name: '舆情及投诉综合分析', icon: require('../../assets/img/icon9.png'), icon1: require('../../assets/img/icon8.png'), url: '/tsfx' },
				{ id: 5, name: '车流综合分析', icon: require('../../assets/img/icon11.png'), icon1: require('../../assets/img/icon10.png'), url: '/car' },
			],
			activeIndex: localStorage.getItem('activeMenu') || '/ykhx',
		};
	},
	watch: {
		$route: {
			handler(to, from) {
				if (to.path) {
					localStorage.setItem('activeMenu', to.path);
				}
			},
			immediate: true,
			deep: true,
		},
	},
	methods: {
		handleClick(item, index) {
			if (this.activeIndex != item.url) {
				this.$router.push(item.url);
			}

			this.activeIndex = item.url;
		},
	},
};
</script>

<style lang="scss" scoped>
.home {
	height: 100%;
	background: #F8F8FF;

	.top-box {
		width: 100%;
		height: 60px;
	}

	.content-box {
		display: flex;
		// height: calc(100% - 50px);

		.left-box {
			width: 60px;
			/* min-height: 100%; */
			background-color: rgb(50, 65, 87);
			border-top-right-radius: 45px;
			padding: 40px 0;
			height: 100vh;

			.item-btn {
				position: relative;
				height: 90px;
				user-select: none;
				cursor: pointer;
				border-bottom: 1px solid #fff;
				display: flex;
				align-items: center;
				justify-content: center;

				.btn-text {
					position: relative;
					z-index: 10;
				}
			}

			.active {
				color: rgb(50, 65, 87);
			}

			.item-btn.active::before {
				content: '';
				position: absolute;
				left: 10px;
				top: 10px;
				height: 70px;
				width: 40px;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
				z-index: 0;
				background: #fff;
			}
		}
		.right-box {
			flex: 1;
			min-width: 0;
			height: 96vh;
			overflow: auto;
		}
	}
}
</style>
